<template>
  <el-card shadow="never" class="layout">
    <div class="title_box">
      <p class="title">
        <span>{{info.title}}</span>
        <p v-if="info.activity_status == 1" class="open hint">已开启</p>
        <p v-else-if="info.activity_status == 3" class="close hint">已过期</p>
        <p v-else class="close hint">已关闭</p>
      </p>
      <p class="desc">{{info.desc ? info.desc : '--'}}</p>
      <p class="timer">
        <span>有效期：{{info.effective_time ? info.effective_time : '--'}}</span>
        <span>规则：{{info.rule_name ? info.rule_name : '--'}}</span>
      </p>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
  defineProps(['info'])
</script>

<style scoped lang="scss">
  .layout {
    .el-card__body {
      padding: 27px 24px 24px;
    }
    .title_box {
      font-family: PingFangSC-Regular, PingFang SC;
      .title {
        margin-bottom: 19px;
        display: flex;
        align-items: center;
        span {
          font-weight: 500;
          color: #33302D;
          font-size: 18px;
        }
        .hint {
          margin-left: 12px;
          font-weight: 400;
          padding: 2px 8px;
          color: #666666;
          font-size: 14px;
          &::before {
            
          }
        }
        .open {
          background: #EBFBF8;
          border-radius: 2px;
          &:before {
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-bottom: 1px ;
            margin-right: 6px;
            background: #32D1AD;
        }
        }
        .close {
          background: #FFEFEA;
          border-radius: 2px;
          &::before {
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-bottom: 1px ;
            margin-right: 6px;
            background: #FF4A1A;
          }
        }
      }
      .desc {
        font-size: 14px;
        color: #585858;
        margin-bottom: 16px;
      }
      .timer {
        display: flex;
        font-size: 14px;
        font-weight: 400;
        color: #585858;
        :first-child {
          margin-right: 75px;
        }
      }
    }
  }
</style>
